import React, { useState } from 'react'

function InputBox(props) {
  const [inputValue, setInputValue] = useState('')

  const handleSubmit = event => {
    event.preventDefault()
    props.onInputSubmit(inputValue)
    setInputValue('')
  }

  const handleCancel = () => {
    props.onInputCancel()
    setInputValue('')
  }

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <label>
          {props.promptMessage}
          <input
            type="text"
            value={inputValue}
            onChange={e => setInputValue(e.target.value)}
          />
        </label>
        <button type="submit">提交</button>
        <button type="button" onClick={handleCancel}>
          取消
        </button>
      </form>
    </div>
  )
}

export default InputBox
